<template>
  <div class="short-msg-container">
    <div class="add-msg">
      <el-button
        type="primary"
        class="btn"
        icon="el-icon-plus"
        @click="sendMessage"
      >
        发送短报文
      </el-button>
    </div>
    <div class="short-msg-table">
      <table cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td>序号</td>
            <td>标题</td>
            <td>内容</td>
            <td>接收时间</td>
          </tr>
          <tr v-for="(item, index) in messageList" :key="item.id">
            <td>{{ index + 1 }}</td>
            <td :title="item.messageName">{{ item.messageName }}</td>
            <td :title="item.messageContent">{{ item.messageContent }}</td>
            <td>{{ item.receiveTime }}</td>
          </tr>
          <tr v-if="isNoMessage">
            <td colspan="4">当前船舶尚未发送过短报文</td>
          </tr>
          <!-- <tr>
            <td>2</td>
            <td>在航</td>
            <td>平安</td>
            <td>2022-09-20 12:11:23</td>
          </tr>
          <tr>
            <td>3</td>
            <td>离港</td>
            <td>完成卸货</td>
            <td>2022-09-30 12:11:23</td>
          </tr> -->
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import { getTextMessageByShipId } from "@/api/ship";
export default {
  props: {
    shipInfo: {
      type: Object,
    },
  },
  data() {
    return {
      messageList: [],
      isNoMessage: false, // 没有发过短报文
    };
  },
  mounted() {
    this.getMessageList();
  },
  methods: {
    getMessageList() {
      getTextMessageByShipId({
        shipId: this.shipInfo.shipId,
        pageSize: 5,
      }).then((res) => {
        // res.result.records = []
        if (res.result && res.result.records && res.result.records.length > 0) {
          this.messageList = res.result.records;
        } else {
          this.isNoMessage = true;
        }
      });
    },
    sendMessage() {
      this.$message.warning("岸端发送短报文即将开放，敬请期待...");
      // this.$message({
      //   type: "success",
      //   message: "1111岸端发送短报文即将开放，敬请期待...",
      //   iconClass: "el-icon-info",
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.short-msg-container {
  padding: 10px 20px;
  .add-msg {
    .btn {
      background: #004aaa;
      padding: 8px 11px;
    }
  }
  .short-msg-table {
    margin: 16px 0px;

    table {
      width: 100%;
      border-bottom: 1px solid #d8d8d8;
      color: #666666;
      margin-top: 9px;
      tr {
        &:first-child {
          background: #e9eeff;
        }
        td {
          border-top: 1px solid #d8d8d8;
          font-size: 14px;

          font-weight: 400;
          color: #666666;
          // width: 91px;
          // height: 34px;
          text-align: center;
          padding: 4px 0;

          max-width: 100px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
